<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@3"></script>
</head>
<body>
    <div id="app">
        
        <input type="checkbox" v-model="visible" @click="visible=!visible">是否为会员{{visible}}

        <div v-show="visible">

            <select  v-model="type">

                <option value="黄金" >黄金会员</option>
                <option value="白金" >白金会员</option>
                <option value="钻石" >钻石会员</option>

            </select>

            {{type}}

        </div>
        <div>
            数量<input type="text" v-model="quanlty">{{quanlty}}<br>
             单价<input type="text" v-model="price">{{price}}<br>
        </div>
        <div v-show="visible">
        
            尊贵的{{type}}用户,你购买的数量是{{quanlty}},单价是{{price}}，折扣是{{discount}},总价是{{total}}
        
        </div>
       
    </div>
</body>
</html>
<script>
    const app = Vue.createApp({
        data(){
            return{
                
                visible:false,
                type:'顾客',
                price:0,
                quanlty:0
            }
        },
        computed:{
            discount(){
                if(this.type=="黄金")return 0.7;
                else if(this.type=="白金")return 0.6;
                else return 0.5                
           
            },
            total(){
                return this.price*this.discount*this.quanlty

            }
        }
    }).mount("#app")
</script>